<template>
	<view class="backgroundImg ">
		<view class="swiperList flex">

			<swiper class="swiper" :autoplay='autoplayBoolen' vertical=true circular :indicator-dots="indicatorDots"
				:duration="duration">
				<block v-for="(item,i) in shareList" :key="i">
					<swiper-item>
						<view class="swiper-item uni-bg-red flex">
							<image class="noticeImg" src="../../static/会员卡首页2/矩形 141.png" mode=""></image>
 <text class="font-overflow" style="color: #fff;font-size: 30rpx;max-width: 380rpx;">{{item.userName }}发布了视频领取了奖励 </text>
				
						</view>

					</swiper-item>
				</block>

			</swiper>

		</view>

		<!-- 每日秒杀 -->
		<view class="dailyFlashSale ">
			<view class="flex-between">
				<view class="flex-start-center">
					<image class="fireImg margin-right_16rpx" src="../../static/会员卡营销用户端/path (7).png" mode=""></image>
					<image class="fireSell" src="../../static/会员卡营销用户端/今日热卖.png" mode="scaleToFill"></image>
					<text class="font-weight_bold margin-left_16rpx" style="color: rgb(255, 82, 38);">已有上百人购买</text>
				</view>

				<view class="flex-start-center">
					<view class="flex-between v-p-share">
						<view class="v-m-width not-font-overflow flex1">
							<block v-for="(item, index) in detailInfo" :key="index">
								<image v-if="index<5" class="pt_img" :src="item.avatar"></image>
							</block>

						</view>

					</view>
					<text>9000人逛过</text>
				</view>
			</view>
			<view class="dailyFlashSaleList flex-wrap-flex-start">
				<block v-for="(item,index) in list" :key="index">
					<view class="" @click="navDetailPage(item)" v-if="index<3">
						<image class="dailyFlashSaleImg"
							:style="{ 'margin-right': index > 1 ? '0' : '10rpx','width': index > 1 ? '220rpx' : '217rpx'}"
							:src="item.host_img[0]" mode=""></image>
						<view style="width: 220rpx;" class="font-overflow2 margin-bottom_10rpx">
							<text>{{item.name}}</text>
						</view>


						<ai-progress class="margin_10rpx_0" :percentage="63" :is-animate="true"
							duration="3000"></ai-progress>



						<view style="color: rgb(255, 0, 0);" class="font-weight margin-bottom_10rpx">
							￥{{item.price}}
						</view>
						<!-- 价格 -->
						<view class="price">
							<view style="color: rgb(150, 150, 150); font-size: 24rpx;;">

								日常价<text style="text-decoration-line: line-through">￥{{item.market_price}}</text>
							</view>

						</view>
					</view>

				</block>
			</view>


		</view>
		<!-- 每日疯抢 -->
		<view class="dailyFlashSale ">
			<view class="flex-between">
				<view class="flex-start-center">

					<image class="fireSell" src="../../static/会员卡营销用户端/今日疯抢.png" mode="scaleToFill"></image>
					<cc-countdown style="margin-left: 10rpx;" color="#FFF" background-color="red" splitorColor="red"
						:showColon="true" :showDay="false" :day="0" :hour="24" :minute="0" :second="0"
						@timeup="timeup"></cc-countdown>
				</view>
				<sunui-navbar style="width: 300rpx;" v-if="tabList.length>=1" :items="tabList" lineHeight="0rpx"
					:isCenter="true" :currentIndex="navIndex" padding="2rpx" activeColor="rgb(0, 0, 0)" :size="70"
					activeLineBg="rgb(255, 0, 0)" textAlign="center" activeLineWidth="100%"
					activeDirection="space-between" activeLineHeight="0rpx" bgColor="transparent" :margin="30"
					@change="getChange"></sunui-navbar>

			</view>
			<view class="dailyFlashSaleList ">
				<block v-for="(item,index) in list" :key="index">
					<view class="flex-around" style="margin-bottom: 10rpx;" @click="navDetailPage(item)" v-if="index<3">
						<image class="dailyFlashSaleImg" style="margin-right: 10rpx; " :src="item.host_img[0]" mode="">
						</image>
						<view class="">
							<view style="width: 450rpx;" class="font-overflow2 margin-bottom_10rpx">
								<text style="font-weight: 700;">{{item.name}}</text>
							</view>


							<ai-progress class="margin_10rpx_0" :percentage="63" :is-animate="true"
								duration="3000"></ai-progress>

							<!-- 价格 -->
							<view class="price margin-bottom_10rpx">
							
								<view  class="flex-start-center"style="color: rgb(150, 150, 150); font-size: 24rpx;;">
                                    <view class="economize"><text style="color: rgb(255, 0, 0);">省{{(item.market_price-item.price).toFixed(2)}}元</text></view>
									日常价<text style="text-decoration-line: line-through">￥{{item.market_price}}</text>
								</view>

							</view>

							<view   style="color: rgb(255, 0, 0); padding-left: 10rpx;" class="font-weight rob flex-start-center">
								￥{{item.price}}
							</view>

						</view>
					</view>

				</block>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				duration: 1000,
				indicatorDots: false,
				autoplayBoolen: true,
				token: uni.getStorageSync('login').token,
				list: [],
				classifyList: [],
				shareList: [{
					userName: '小明',

				}, {
					userName: '小红',

				}, ],
				navIndex: 0,
				tabList: [],
				detailInfo: [{
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}, {
					avatar: '../../static/会员卡首页2/矩形 141.png'
				}]
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			getChange(e) {
				this.navIndex = e
			},
			async init() {
				const result = await this.$http.post({
					url: this.$api.goodsList,
					data: {
						page: 1,
						limit: 1000,

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})


				if (result.code == 0) {


					result.data.list.forEach((item) => {
						item.host_img = item.host_img.split(',').map((item) => item.trim());
					})
					this.list = this.list.concat(result.data.list);

					console.log('this.list', this.list, this.list.length);
				}
				const resClass = await this.$http.post({
					url: this.$api.classifyList,
					data: {



					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resClass.code == 0) {



					console.log(resClass.data)

					this.classifyList = resClass.data

					this.tabList = this.classifyList.map((item) => {
						return {
							name: item.name,
							id: item.id
						}
					})
					// this.$sun.toast(resPoster.msg, 'none')


				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.backgroundImg {
		padding: 23rpx;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url('../../static/会员卡营销用户端/金融保险618银行手机APP营销活动手机海报 (1).png');
		height: 100vh;
	}

	.v-p-share {
		padding: 2rpx 2rpx 0 2rpx;

		.v-m-width {
			margin-right: 40rpx;

			.pt_img {
				width: 50rpx;
				height: 50rpx;
				margin-right: -30rpx;
				border-radius: 50%;
			}
		}

		.v-share-friend {
			text {
				color: #294d7d;
				font-size: 24rpx;
				padding-right: 50rpx;
			}

			view {
				color: #ffffff;
				width: 154rpx;
				height: 58rpx;
			}
		}

		.v-share-friend2 {
			text {
				color: #294d7d;
				font-size: 24rpx;
			}
		}
	}

	page {
		background-color: #fe322f;
	}

	.swiperList {

		padding-top: 160rpx;



		.swiper {
			margin-bottom: 10rpx;
			border-radius: 30rpx;

			width: 682rpx;
			height: 76rpx;


			background: rgb(253, 131, 31);


		}



	}

	.dailyFlashSale {
		padding: 16rpx;
		margin-top: 20rpx;
		// width: 694rpx;

		border-radius: 10px;

		background: linear-gradient(180.00deg, rgb(255, 234, 234), rgb(255, 255, 255) 33.588%, rgb(255, 255, 255) 100%);

		.fireImg {
			width: 40.74rpx;
			height: 44.86rpx;
		}

		.fireSell {
			width: 148rpx;
			height: 38rpx;
		}

		.dailyFlashSaleList {
			margin-top: 25rpx;

			.dailyFlashSaleImg {

				width: 217rpx;
				height: 217rpx;

			}
			.economize{
				/* 矩形 1707 */
			
				padding: 5rpx  8rpx 5rpx 5rpx;
			
			
				box-sizing: content-box;
				border: 2rpx solid rgb(253, 31, 43);
				border-radius: 10px 20px 20px 0px;
				
				background: rgb(255, 244, 242);
				margin-right: 10rpx;
			}
			.rob{
				width: 450rpx;
				height: 56rpx;
				border-radius: 20rpx;
				
				background: rgb(255, 244, 242);
			}


		}
	}

	.swiper-item {
		.noticeImg {
			margin-right: 10rpx;
			height: 24px;
			width: 24px;
		}

		width: 682rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
</style>